<template>
	<view>
		<view>
			<view v-if='current ==0'>
				<tab-index></tab-index>
			</view>
			<view v-if='current ==1'>
				<tab-product ref='tabClass'></tab-product>
			</view>
			<view v-if='current ==2'>
				<tab-know></tab-know>
			</view>
			<view v-if='current ==3'>
				<tab-my></tab-my>
			</view>
		</view>
		<u-tabbar :value="current" inactiveColor="#86909C" activeColor="#FF7D00" :safeAreaInsetBottom="true">
			<block v-for="(tab,index) in tablist">
				<u-tabbar-item :text="tab.text" @click="touchTab(index)">
					<image class="tab-img" :src="tab.iconPath" slot="inactive-icon"></image>
					<image class="tab-img" :src="tab.selectedIconPath" slot="active-icon"></image>
				</u-tabbar-item>
			</block>
		</u-tabbar>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				title: 'Hello',
				current: 0,
				tabbarHeight: 0,
				tablist: [{
						iconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_index_icon_h.png",
						selectedIconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_index_icon_s.png",
						text: '首页',
						count: 0,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_product_icon_h.png",
						selectedIconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_product_icon_s.png",
						text: '产品中心',
						customIcon: false,
					},
					{
						iconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_know_icon_h.png",
						selectedIconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_know_icon_s.png",
						text: '知识圈',
						customIcon: false,
					},
					{
						iconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_my_icon_h.png",
						selectedIconPath: "https://item.techolic.cn/hjf/Public/appimg/tab_my_icon_s.png",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
					},
				],
			};
		},
		mounted() {
			let that = this;
			that.$uGetRect('.tabbar').then(res => {
				that.tabbarHeight = res.height
			})
		},
		// onPageScroll() {
		// 	if (this.current == 1) {
		// 		this.$refs.tabClass.closeTab();
		// 	}
		// },
		onLoad(option) {
			console.log('onload=============================');
			if (option.gzhid) {
				app.globalData.gzhid = option.gzhid;
			}
			app.login();
			console.log(option);
		},

		methods: {
			touchTab(index) {
				let that = this;
				that.current = index;
			},
		}
	}
</script>

<style lang="scss">
	.tab-img {
		width: 40rpx;
		height: 40rpx;
	}
</style>